<template>
	<view class="container" :style="{ height: '100vh', overflow: 'hidden' }">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="statusBarStyle"></view>
		
		<!-- 头部标题区 -->
		<view class="header" :style="{ top: `${statusBarHeight}px` }">
			<view class="header-content">
				<view class="left-section">
					<view class="back-btn" v-if="showBackButton" @tap="testAPI">
						<u-icon name="arrow-left" color="#6366F1" size="44"></u-icon>
					</view>
					<view class="title-group" @tap="backToHome">
						<text class="title">黑话</text>
						<text class="subtitle">「职场00后必备」</text>
					</view>
				</view>
				<view class="header-right">
					<view class="share-btn">
						<u-icon name="share" color="#6366F1" size="32"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-bar">
				<view class="industry-filter" @tap="showIndustryPicker">
					<text class="filter-text">{{ selectedIndustry }}</text>
					<u-icon name="arrow-down" color="#6366F1" size="20"></u-icon>
				</view>
				<input 
					type="text" 
					class="search-input" 
					placeholder="输入'抓手'试试？"
					v-model="searchText"
					@input="onSearch"
				/>
				<view class="voice-btn" 
					@touchstart.prevent="startVoiceInput"
					@touchend.prevent="stopVoiceInput">
					<u-icon name="mic" color="#FFFFFF" size="36"></u-icon>
				</view>
			</view>
		</view>

		<!-- 搜索结果区域 -->
		<scroll-view 
			scroll-y 
			class="content-scroll" 
			v-if="searchResults.length > 0"
			:style="{ paddingBottom: '240rpx' }"
			@scrolltolower="onScrollToLower"
			@touchmove.stop="() => {}"
		>
			<view class="results-container">
				<view class="result-card" v-for="(item, index) in searchResults" :key="index">
					<view class="term-header">
						<text class="term-name">{{ item.name }}</text>
						<text class="term-tag">{{ item.industry }}</text>
					</view>
					<view class="term-scene">{{ item.scene }}</view>
					<view class="related-terms">
						<text v-for="(term, idx) in item.related" :key="idx">{{ term }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 行业标签矩阵 -->
		<view class="industry-matrix" v-else>
			<view class="matrix-header">
				<text class="matrix-title">热门行业</text>
				<text class="matrix-subtitle">点击查看各行业TOP10黑话</text>
			</view>
			<view class="tags-container">
				<view 
					class="industry-tag" 
					v-for="(industry, index) in industries" 
					:key="index"
					:class="['gradient-' + (index + 1)]"
					@tap="showIndustryTop10(industry)"
				>
					<view class="tag-content">
						<text class="tag-emoji">{{ industry.emoji }}</text>
						<text class="tag-name">{{ industry.name }}</text>
					</view>
					<text class="tag-count">TOP 10</text>
				</view>
			</view>
		</view>

		<!-- 广告区域 -->
		<view class="ad-section" v-if="!hasWatchedAd">
			<view class="banner-ad">
				<!-- 广告组件将在这里 -->
			</view>
			<button class="unlock-btn" @tap="watchAdForUnlock">
				<u-icon name="play-right-fill" color="#FFFFFF" size="36"></u-icon>
				<text>解锁更多黑话</text>
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed, reactive } from 'vue';

// 状态
const searchText = ref('');
const selectedIndustry = ref('全部');
const searchResults = ref([]);
const remainingFreeCount = ref(5);
const statusBarHeight = ref(20);
const showBackButton = ref(false);
const hasWatchedAd = ref(false);

// 行业数据
const industries = [
	{ name: '互联网', emoji: '🌐' },
	{ name: '金融', emoji: '💰' },
	{ name: '制造业', emoji: '' },
	{ name: '教育', emoji: '📚' },
	{ name: '医疗', emoji: '🏥' },
	{ name: '房地产', emoji: '🏢' },
	{ name: '零售', emoji: '🛍' },
	{ name: '文创', emoji: '🎨' }
];

// 模拟数据库
const mockDatabase = reactive([]);

// 生命周期
onMounted(() => {
	// const systemInfo = uni.getSystemInfoSync();
	// statusBarHeight.value = systemInfo.statusBarHeight;
	testAPI()
});

// 计算属性
const statusBarStyle = computed(() => {
			return {
		height: `${statusBarHeight.value}px`
	};
});

// 方法
const testAPI = async () => {
	// const col = uniCloud.importObject('col') //第一步导入云对象
	// try {
	// 	const res = await col.sayHello() //导入云对象后就可以直接调用该对象的方法了，注意使用异步await
	// 	uni.showToast({
	// 		code: res.errCode,
	// 		content: res.errMsg,
	// 	})
	// } catch (e) {
	// 	// 符合uniCloud响应体规范 https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=resformat，自动抛出此错误
	// 	uni.showModal({
	// 		title: '创建失败',
	// 		content: e.errMsg,
	// 		showCancel: false
	// 	})
	// }

	const db = uniCloud.database();
	// 获取 `user` 集合的引用
	const collectionData = db.collection('heHuaData');

	try {
		let HeHuaRes = await collectionData.get();
		console.log("HeHuaRes", HeHuaRes);
		
		// 正确更新reactive数组
		mockDatabase.length = 0; // 清空数组
		HeHuaRes.result.data.forEach(item => mockDatabase.push(item));
	} catch (err) {
		console.error("获取数据失败", err);
		uni.showToast({
			title: '获取数据失败',
			icon: 'none'
		});
	}
};
const onSearch = () => {
	const text = searchText.value.trim().toLowerCase();
	if (!text) {
		searchResults.value = [];
		return;
	}
	
	searchResults.value = mockDatabase.filter(item => {
		if (selectedIndustry.value !== '全部' && item.industry !== selectedIndustry.value) {
			return false;
		}
		
		return item.name.toLowerCase().includes(text) ||
			item.scene.toLowerCase().includes(text) ||
			item.related.some(term => term.toLowerCase().includes(text));
	});
};



const showIndustryPicker = () => {
	uni.showActionSheet({
		itemList: ['全部', ...industries.map(i => i.name)],
		success: (res) => {
			selectedIndustry.value = res.tapIndex === 0 ? '全部' : industries[res.tapIndex - 1].name;
			onSearch();
		}
	});
};

const startVoiceInput = () => {
	// 使用 uni.getRecorderManager() 实现语音输入
	const recorderManager = uni.getRecorderManager();
	
	recorderManager.onStart(() => {
		uni.showToast({
			title: '开始录音...',
			icon: 'none'
		});
	});
	
	recorderManager.onStop((res) => {
		uni.showToast({
			title: '录音完成',
			icon: 'success'
		});
		// 这里可以调用语音识别API
	});
	
	recorderManager.start({
		duration: 10000,
		sampleRate: 16000,
		numberOfChannels: 1,
		encodeBitRate: 48000,
		format: 'mp3'
	});
	
	setTimeout(() => {
		recorderManager.stop();
	}, 3000);
};

const showIndustryTop10 = (industry) => {
	const mockTop10 = mockDatabase
		.filter(item => item.industry === industry.name)
		.slice(0, 10);
		
	selectedIndustry.value = industry.name;
	searchResults.value = mockTop10;
	showBackButton.value = true;
};

const backToHome = () => {
	selectedIndustry.value = '全部';
	searchResults.value = [];
	searchText.value = '';
	showBackButton.value = false;
};

const watchAdForUnlock = () => {
	uni.showModal({
		title: '观看广告',
		content: '观看15秒广告即可解锁更多黑话',
		success: (res) => {
			if (res.confirm) {
				uni.showLoading({
					title: '加载广告中...' 
				});
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '解锁成功！',
						icon: 'success'
					});
					remainingFreeCount.value += 5;
					hasWatchedAd.value = true; // 设置已观看广告标记
				}, 1000);
			}
		}
	});
};
</script>

<style lang="scss">
	.container {
		padding: 0;
		min-height: 100vh;
		background: linear-gradient(180deg, #F6F7FF 0%, #FFFFFF 100%);
		position: relative;
		overflow: hidden;
	}

	.status-bar {
		width: 100%;
		background: transparent;
	}

	.header {
		position: sticky;
		left: 0;
		width: 100%;
		z-index: 100;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(20px);
		border-bottom: 1rpx solid rgba(99, 102, 241, 0.08);
		
		.header-content {
			padding: 16rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.back-btn {
				width: 72rpx;
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;
				background: rgba(99, 102, 241, 0.08);
				border-radius: 36rpx;
				transition: all 0.3s ease;
				border: 2rpx solid rgba(99, 102, 241, 0.1);
				
				&:active {
					transform: translateY(2rpx);
					background: rgba(99, 102, 241, 0.12);
					box-shadow: 0 2rpx 8rpx rgba(99, 102, 241, 0.15);
				}
			}
			
			.left-section {
				display: flex;
				align-items: center;
			}
		}
		
		.title-group {
			display: flex;
			align-items: baseline;
			
			.title {
				font-size: 40rpx;
				font-weight: 800;
				background: linear-gradient(45deg, #6366F1, #A855F7);
				-webkit-background-clip: text;
				color: transparent;
				letter-spacing: -1px;
			}
			
			.subtitle {
				font-size: 22rpx;
				color: #6366F1;
				margin-left: 16rpx;
				opacity: 0.9;
				font-weight: 500;
			}
		}
		
		.header-right {
			display: flex;
			align-items: center;
			
			.share-btn {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(99, 102, 241, 0.08);
				border-radius: 32rpx;
				transition: all 0.3s ease;
				
				&:active {
					background: rgba(99, 102, 241, 0.12);
				}
			}
		}
	}

	.search-section {
		padding: 20rpx 30rpx 30rpx;
		margin-bottom: 10rpx;
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			top: -60rpx;
			left: 0;
			right: 0;
			height: 120rpx;
			background: linear-gradient(180deg, rgba(246, 247, 255, 0) 0%, rgba(246, 247, 255, 1) 100%);
			pointer-events: none;
			z-index: -1;
		}
		
		.search-bar {
			display: flex;
			align-items: center;
			background: #FFFFFF;
			padding: 20rpx;
			border-radius: 28rpx;
			box-shadow: 0 8rpx 32rpx rgba(99, 102, 241, 0.12);
			border: 2rpx solid rgba(99, 102, 241, 0.08);
			transform: translateY(0);
			transition: all 0.3s ease;
			
			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.08);
			}
			
			.industry-filter {
				padding: 10rpx 20rpx;
				background: rgba(99, 102, 241, 0.06);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				gap: 8rpx;
				transition: all 0.3s ease;
				border: 1px solid rgba(99, 102, 241, 0.1);
				
				&:active {
					background: rgba(99, 102, 241, 0.1);
				}
				
				.filter-text {
					font-size: 24rpx;
					color: #6366F1;
					font-weight: 600;
				}
				
				.iconfont {
					font-size: 20rpx;
					color: #6366F1;
					margin-left: 4rpx;
				}
			}
			
			.search-input {
				flex: 1;
				margin: 0 24rpx;
				font-size: 28rpx;
				color: #1F2937;
				
				&::placeholder {
					color: #9CA3AF;
				}
			}
			
			.voice-btn {
				width: 76rpx;
				height: 76rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(45deg, #6366F1, #A855F7);
				border-radius: 38rpx;
				color: #fff;
				transform: translateY(0);
				transition: all 0.3s ease;
				box-shadow: 0 6rpx 16rpx rgba(99, 102, 241, 0.2);
				
				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 2rpx 8rpx rgba(99, 102, 241, 0.15);
				}
				
				.iconfont {
					font-size: 36rpx;
				}
			}
		}
	}

	.content-scroll {
		height: calc(100vh - 400rpx);
		// padding: 0 30rpx;
		margin-bottom: 240rpx;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.results-container {
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 690rpx;
		margin: 0 auto;
		
		.result-card {
			width: 90%;
			background: rgba(255, 255, 255, 0.8);
			backdrop-filter: blur(10px);
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			border: 2rpx solid rgba(99, 102, 241, 0.1);
			box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.1);
			
			.term-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 16rpx;
				
				.term-name {
					font-size: 36rpx;
					font-weight: 700;
					color: #1F2937;
					display: inline-block;
					max-width: 70%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.term-tag {
					font-size: 24rpx;
					color: #6366F1;
					background: rgba(99, 102, 241, 0.1);
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
				}
			}
			
			.term-scene {
				font-size: 28rpx;
				color: #4B5563;
				line-height: 1.6;
				margin-bottom: 20rpx;
			}
			
			.related-terms {
				display: flex;
				flex-wrap: wrap;
				gap: 12rpx;
				
				text {
					font-size: 24rpx;
					color: #6366F1;
					background: rgba(99, 102, 241, 0.08);
					padding: 6rpx 16rpx;
					border-radius: 16rpx;
				}
			}
		}
	}

	.industry-matrix {
		padding: 30rpx;
		
		.matrix-header {
			margin-bottom: 30rpx;
			
			.matrix-title {
				font-size: 32rpx;
				font-weight: 700;
				color: #1F2937;
			}
			
			.matrix-subtitle {
				font-size: 24rpx;
				color: #6B7280;
				margin-left: 16rpx;
			}
		}
		
		.tags-container {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;
			
			.industry-tag {
				padding: 30rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				gap: 12rpx;
				color: #fff;
				
				.tag-content {
					display: flex;
					align-items: center;
					gap: 12rpx;
				}

				.tag-emoji {
					font-size: 40rpx;
				}
				
				.tag-name {
					font-size: 32rpx;
					font-weight: 600;
				}
				
				.tag-count {
					font-size: 24rpx;
					opacity: 0.8;
				}
			}
		}
	}

	// 渐变背景类
	@for $i from 1 through 8 {
		.gradient-#{$i} {
			@if $i == 1 {
				background: linear-gradient(45deg, #6366F1, #A855F7);
			} @else if $i == 2 {
				background: linear-gradient(45deg, #3B82F6, #60A5FA);
			} @else if $i == 3 {
				background: linear-gradient(45deg, #10B981, #34D399);
			} @else if $i == 4 {
				background: linear-gradient(45deg, #F59E0B, #FBBF24);
			} @else if $i == 5 {
				background: linear-gradient(45deg, #EC4899, #F472B6);
			} @else if $i == 6 {
				background: linear-gradient(45deg, #8B5CF6, #A78BFA);
			} @else if $i == 7 {
				background: linear-gradient(45deg, #14B8A6, #2DD4BF);
			} @else {
				background: linear-gradient(45deg, #F43F5E, #FB7185);
			}
		}
	}

	.ad-section {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10px);
		padding: 20rpx 30rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.banner-ad {
			width: 100%;
			max-width: 690rpx;
			height: 160rpx;
			background: #F3F4F6;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
		}
		
		.unlock-btn {
			width: 100%;
			max-width: 690rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
		justify-content: center;
			gap: 12rpx;
			background: linear-gradient(45deg, #6366F1, #A855F7);
			color: #fff;
			border-radius: 44rpx;
			font-size: 30rpx;
			font-weight: 600;
			box-shadow: 0 4rpx 10rpx rgba(99, 102, 241, 0.2);
			
			.iconfont {
				font-size: 36rpx;
			}
		}
	}

	.title-group {
		cursor: pointer;
		transition: opacity 0.3s ease;
		
		&:active {
			opacity: 0.8;
		}
	}

	.voice-btn {
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			width: 12rpx;
			height: 12rpx;
			background: #FF4949;
			border-radius: 50%;
			right: 4rpx;
			top: 4rpx;
			opacity: 0;
			transition: opacity 0.3s ease;
		}
		
		&.recording::after {
			opacity: 1;
		}
	}
</style>


